<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>${details.product_Name}立即购买-小米商城</title>
		<link rel="stylesheet" type="text/css" href="/css/style.css">
        <link rel="stylesheet" type="text/css" href="/css/mdialog.css">
	</head>
    <script type="text/javascript" src="/js/zepto.min.js"></script>
    <script type="text/javascript" src="/js/mdialog.js"></script>
    <script src="/js/jquery-3.2.1.min.js"></script>
	<body>
	<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
                        <li><a href="/findAll">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="/Cart/findAll?id=${sessionuserid!"0"}">购物车</a></div>
					<div class="fr">
						<ul>
							<li id="denglu"><a href="login.ftl" target="_blank">登录</a></li>
							<li>|</li>
							<li id="zhuce"><a href="register.ftl" target="_blank" >注册</a></li>
							<li>|</li>
							<li ><a href="">消息通知</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="index.ftl" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
                    <li><a href="liebiao.ftl?typeid=1&name=小米手机">小米手机</a></li>
                    <li><a href="liebiao.ftl?typeid=13&name=红米手机">红米</a></li>
                    <li><a href="liebiao.ftl?typeid=3&name=平板·笔记本">平板·笔记本</a></li>
                    <li><a href="liebiao.ftl?typeid=2&name=电视·盒子">电视·盒子</a></li>
                    <li><a href="liebiao.ftl?typeid=12&name=配件">配件</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="" method="post">

					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	
	<!-- xiangqing -->
	<form action="post" method="">
	<div class="xiangqing">
		<div class="neirong w">
			<div class="xiaomi6 fl">${details.product_Name}</div>
			<nav class="fr">
				<li><a href="">概述</a></li>
				<li>|</li>
				<li><a href="">变焦双摄</a></li>
				<li>|</li>
				<li><a href="">设计</a></li>
				<li>|</li>
				<li><a href="">参数</a></li>
				<li>|</li>
				<li><a href="">F码通道</a></li>
				<li>|</li>
				<li><a href="">用户评价</a></li>
				<div class="clear"></div>
			</nav>
			<div class="clear"></div>
		</div>	
	</div>
	
	<div class="jieshao mt20 w">
		<div id="tupian" class="left fl">
             <#list imageList as imagelist>
                 <#if imagelist.detailsid==details.goodsID&&imagelist.type=="xiangqing">
            <img src="/image/xiangqing/${imagelist.image}">
                 </#if>
             </#list>
        </div>
		<div class="right fr">
			<div id="shoujiname" class="h3 ml20 mt20">${details.product_Name}</div>
			<div class="jianjie mr40 ml20 mt10">${details.descriptio}</div>

			<div id="jiage" class="jiage ml20 mt10"></div>
			<div class="ft20 ml20 mt20">选择版本</div>
			<div class="xzbb ml20 mt10">
				<#list selectedTypeList as typelist>
				<div class="banben fl" id="xuanze">
                    <input type="hidden" id="xuanzeid" value="${typelist.selected_id}">
					<a class="zhiti" <#if typelist_index==0>style="color:#ff6700"</#if> >
						<span id="xinghao" class="xinghao">${typelist.select_version}</span>
						<span id="jiages" class="jiages">${typelist.select_Price}</span>
					</a>
				</div>
                </#list>
				<div class="clear"></div>
			</div>

			<div class="ft20 ml20 mt20">选择颜色</div>
			<div class="xzbb ml20 mt10" id="xunhuancolor">
			</div>
			<div class="xqxq mt20 ml20">
				<div class="top1 mt10">
					<div class="left1 fl" id="xiugainame"></div>
					<div class="right1 fr" id="xiugaijiage"></div>
					<div class="clear"></div>
				</div>
				<div class="bot mt20 ft20 ftbc" id="zongji">总计：${details.product_price}元</div>
			</div>
			<div class="xiadan ml20 mt20">
					<input class="jrgwc"  type="button" name="jrgwc" value="立即选购" />

					<input class="jrgwc" type="button"  name="jrgwc" value="加入购物车" id="addcart"/>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	</form>
	<!-- footer -->
	<footer class="mt20 center">
			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>

		</footer>
	</body>
    <script type="text/javascript">

        function doCollect(ss){
            ss.parent().siblings().find("a").css("color","#000");
            ss.css("color","#ff6700");
            var ys=ss.text();
            var id=${details.goodsID}
			var json=({url:ys,id:id});
            $.get("/Image/xiangqing",json,function (url) {
                $("#tupian").html("<img src='/image/xiangqing/"+url+"'>");
            },"text")
        }

        $(document).ready(function(){
            var name="${sessionname!"null"}";
            var id="${sessionuserid!"null"}";
            if (name!="null"&&id!="null"){
                $("#denglu").html("<a href='login.ftl' id='username' target='_blank'>欢迎您！"+name+"</a>");
                $("#zhuce").html("<a href='User/self_info?id="+id+"' id='userid' target='_blank'>个人中心</a>");
            }
            var name=$("#shoujiname").text();
            var xinhaos=$("#xinghao").text();
            var jiage=$("#jiages").text();
            $("#xiugainame").html(name+xinhaos);
            $("#xiugaijiage").html(jiage);
            $("#zongji").html("总计："+jiage+"元");
            var s=$("#xuanzeid").val();
                $.post("yanse","id="+s,function (selectedImageList) {
                var yanse="";
                var pjie="";
                   for (var index in selectedImageList){
                       if (index==0){
                           yanse="style='color:#ff6700'";
                       }else {
                           yanse="";
                       }
                       pjie+="<div class='banben fl'>";

                       pjie+="<a class='banbenyanse' onclick='doCollect($(this))'"+yanse+"><span class='yuandian'></span>";

                       pjie+="<span class='yanse'>"+selectedImageList[index].selected_color+"</span></a></div>";
                   }
                $("#xunhuancolor").html(pjie);
            });
            $(".banben").click(function () {
                $(this). parent().find("a").css("color","#000");
                $(this).find("a").css("color","#ff6700");
                var xinhao=$(this).find(".xinghao").text();
                var jiage=$(this).find(".jiages").text();
                var colerid=$(this).find("#xuanzeid").val();
                $.post("yanse","id="+colerid,function (selectedImageList) {
                    var yanse="";
                    var pjie="";
                    for (var index in selectedImageList){
                        if (index==0){
                            yanse="style='color:#ff6700'";
                        }else {
                            yanse="";
                        }
                        pjie+="<div class=\"banben fl\">";

                        pjie+="<a class='banbenyanse' onclick='doCollect($(this))' "+yanse+"><span class=\"yuandian\"></span>";

                        pjie+="<span class=\"yanse\">"+selectedImageList[index].selected_color+"</span></a></div>";
                    }
                    $("#xunhuancolor").html(pjie);
                })
                $(".left1").text("${details.product_Name}"+xinhao);
                $(".right1").text(jiage);
                $("#zongji").html("总计："+jiage+"元");
            })



			$("#addcart").click(function () {
                var userid=${sessionuserid!"null"};
                if (userid==null){
                    new TipBox({type:'tip',str:'请先登陆',clickDomCancel:true,setTime:10000500,hasBtn:true});
                } else{
                    var  name=$(".left1").text();
                    var jiage=$("#xiugaijiage").text();
					 var detailsid="${details.goodsID}";
                    var json=({name:name,commodity_Price:jiage,userid:userid,detailsid:detailsid,total:1})

                    $.get("/Cart/Add",json,function (boo) {
                        new TipBox({type:'load',str:"正在执行操作..",setTime:1500,callBack:function(){
                                new TipBox({type:'success',str:'添加成功',hasBtn:true});
                            }});
                    },"text")


                }
            })



        })



      /* */

    </script>

</html>